<template>
    <el-row :gutter="20">
        <el-col :span="17">
            <div class="marginBottom20 colorFFF">
                <div class="flexFS">
                    <el-avatar :src="datas.author.avatar" alt slot="reference" style="width: 40px; height: 40px" v-if="datas.author"></el-avatar>
                    <div style="width: 150px; margin-left: 10px">
                        <div class="size14">{{ datas.author.name }}</div>
                        <div class="color999 size12 flexFS">{{ datas.created_at }}</div>
                    </div>
                </div>

                <div class="flexFS marginTop10">
                    <div class="flexFS size12" style="width: 80px">
                        <img alt src="@/assets/icon/creation/views.png" srcset width="20px" />
                        <span>{{ datas.viewed }}</span>
                    </div>
                    <div class="flexFS size12 cursor-pointer" style="width: 80px">
                        <img @click="like(1)" alt src="@/assets/icon/creation/like_invalid.png" srcset v-show="!datas.liked_count" width="20px" />
                        <img @click="like(0)" alt src="@/assets/icon/creation/liked.png" srcset v-show="datas.liked_count" width="20px" />
                        <span>{{ datas.like_count | formatNumber }}</span>
                    </div>

                    <div @click="share_visible=!share_visible" class="flexFS size12 cursor-pointer" style="width: 80px;position: relative;">
                        <img alt src="@/assets/icon/creation/share.png" srcset width="20px" />
                        <!-- <span>{{ datas.forwards }}</span> -->

                        <div class="position-absolute share-card" v-if="share_visible">
                            <div class="color-fff">分享视频</div>
                            <div class="font-18 color-fff flex align-center mt-10 share-box">
                                <div @click.stop="changeFriendIndex('decrement')" class="width-8b text-center">
                                    <i class="el-icon-arrow-left cursor-pointer"></i>
                                </div>
                                <div class="flex align-center width-84b scroll-friend" ref="friend" style="scroll-behavior: smooth;overflow-x: scroll;" v-if="contacters.length > 0">
                                    <div :class="{ 'ml-4': index > 0 }" :key="index" v-for="(item, index) in contacters">
                                        <div @click.stop="shareToFriend(item.userProfile.userID)" class="width-60 text-center cursor-pointer">
                                            <div class="flex jus-center">
                                                <el-avatar :size="45" :src="item.userProfile.avatar"></el-avatar>
                                            </div>
                                            <div :title="item.userProfile.nick" class="font-13 text-line1">{{ item.userProfile.nick }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center flex-1 color-999" v-else>暂无好友，去找别人聊聊吧~</div>
                                <div @click.stop="changeFriendIndex('increment')" class="width-8b text-center">
                                    <i class="el-icon-arrow-right cursor-pointer"></i>
                                </div>
                            </div>
                            <div @click.stop="copyLink" class="mt-20 text-center pt-8 pb-8 color-fff width-90b cursor-pointer flex align-center jus-center" style="margin-left:5%;border:1px solid #353047;">
                                <i class="el-icon-paperclip font-14"></i>
                                <span>复制链接</span>
                            </div>
                        </div>
                    </div>
                    <div @click.stop="rewardFun(datas.creation_id)" class="flexFS size12 cursor-pointer" style="width: 80px">
                        <img alt src="@/assets/icon/creation/dasang.png" srcset width="20px" />
                        <span>打赏</span>
                    </div>
                    <div class="flexFS size12" style="width: 450px;" v-if="datas.city || datas.province">
                        <i class="el-icon-location-outline size18"></i>
                                {{ datas.city ? datas.city : datas.province }}
                    </div>
                    <!-- <div class="flexFS color999 size12" style="width: 100px;">
                        <img alt src="@/assets/icon/creation/pl.png" srcset width="20px" />
                        <span>{{ datas.comment_count }}</span>
                    </div>-->
                </div>

                <div class="marginTop30 size18">{{ datas.content }}</div>
                <el-row :gutter="10" class="marginTop10">
                    <el-col :key="key" :span="6" class="mt-5" v-for="(value, key) in datas.media_urls">
                        <el-image :preview-src-list="datas.media_urls" :src="value" class="radius10" fit="cover" style="width: 100%; height: 220px">
                            <div slot="placeholder" class="image-slot" style="width: 100%; height: 220px;background-color: #272337;">
                                    <img src="@/assets/image/load-image.png" alt="" srcset="" style="width: 70px;margin-left: 38%;margin-top: 25%;">
                                </div>
                        </el-image>
                    </el-col>
                </el-row>
                <payment :creation_id="creation_id" ref="payment"></payment>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="box back151225 marginBottom20 colorFFF" style="height: 750px;">
                <comment :creation="datas" :countShow="true" ref="comment"></comment>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import comment from '@/components/video/comment/index'
import payment from '@/components/payment/payment'
import Cookies from 'js-cookie'
export default {
    components: {
        comment,
        payment,
    },
    data() {
        return {
            datas: {},
            share_visible: false,
            creation_id: null,
            current_friend_index: 0,
        }
    },
    computed: {
        contacters() {
            return this.$store.state.system.contacters
        },
    },
    mounted() {
        if (this.$route.query.id) {
            this.getDetails(this.$route.query.id)
        }
    },
    updated() {
        this.$refs.comment.data = []
        this.$refs.comment.inited = false
        this.$refs.comment.beforeInit()
    },
    methods: {
        changeFriendIndex(type) {
            let width = document.getElementsByClassName('share-box')[0].offsetWidth * 0.84
            let placeholer_num = Math.round(width / 62)
            let end_index = this.contacters.length - placeholer_num
            if (type == 'increment') {
                if (this.current_friend_index < end_index) {
                    this.current_friend_index++
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            } else {
                if (this.current_friend_index > 0) {
                    this.current_friend_index--
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            }
        },
        isLogin() {
            // 返回true表示已经登录，false表示未登录
            let result = Cookies.get('user-info')
            if (result) {
                return true
            } else {
                return false
            }
        },
        rewardFun(id) {
            console.log('打赏')
            let res = this.isLogin()
            if (res) {
                this.creation_id = id
                this.$refs.payment.feeShow = true
            } else {
                console.log('未登录')
                this.$store.dispatch('system/showLogin')
            }
        },
        cs() {
            this.$nextTick(() => {
                this.$refs.comment.beforeInit()
            })
        },
        copyLink() {
            let text = 'http://ground.gxjihe.top/#/pages/infomation/infomation?id=' + this.datas.creation_id
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message({
                message: '复制成功',
                type: 'success',
                customClass: 'messageClass',
            })
            this.share_visible = false
        },
        shareToFriend(user_id) {
            this.$store.state.system.message = {
                to: user_id,
                payload: {
                    data: JSON.stringify({
                        longItem: {},
                        postItem: {
                            creation_id: this.datas.creation_id,
                            media_urls: this.datas.media_urls,
                            content: this.datas.content,
                        },
                        shortItem: {},

                        type: 'post',
                    }),
                    description: '',
                    extension: '',
                },
            }
            this.share_visible = false
            this.$message({
                message: '已分享',
                type: 'success',
                customClass: 'super-message',
            })
        },
        getDetails(id) {
            let that = this
            this.$request.get('/creation/get/' + id).then((res) => {
                that.datas = res
                console.log('getDetails', res)

                document.title = '陪秀-' + this.datas.content.substring(0, 100)
            })
        },
        like(type) {
            let param = {
                type: type,
                creation_id: this.datas.creation_id,
            }
            this.$request
                .post('/creation/like/create', param)
                .then((res) => {
                    let resule = 0
                    if (type) {
                        resule = this.datas.like_count + 1
                        this.$set(this.datas, 'like_count', resule)
                    } else {
                        resule = this.datas.like_count - 1
                        this.$set(this.datas, 'like_count', resule)
                    }
                    this.$set(this.datas, 'liked_count', type)
                })
                .catch(() => {})
        },
    },
}
</script>
<style lang="scss" scoped>
.project {
    height: 32px;
    background: #272337;
    border-radius: 40px;
    opacity: 1;
    border: 1px solid #3f3b54;
    padding: 0 10px;
}
.share-card {
    left: 0;
    top: 22px;
    z-index: 10000;
    padding: 20px;
    background: #272337;
    border-radius: 10px;
    border: 1px solid #353047;
    width: 300px;
}
.scroll-friend::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
</style>